<template>
    <div class="forgot-pwd-container">
        <div class="forgot-pwd-header">
            <img src="@/assets/image/bak.png" alt="logo" class="Back-img" @click="goBack" />
            <span class="forgot-pwd-title">忘记密码/重设密码</span>
        </div>
        <div class="forgot-pwd-content" v-if="isSubmit === '1'">
            <form @submit.prevent>
                <div class="forgot-pwd-content-item">
                    <input type="text" class="forgot-pwd-input" placeholder="真实名字" />
                </div>
                <div class="forgot-pwd-content-item">
                    <input type="text" class="forgot-pwd-input" placeholder="联系电话" />
                </div>
                <div class="forgot-pwd-content-item verify-row">
                    <input type="text" class="forgot-pwd-input verify-input" placeholder="验证码" />
                    <button class="verify-btn" type="button">获取验证码</button>
                </div>
                <button class="submit-btn" type="submit" @click="handleSubmit('1')">提交验证信息</button>
            </form>
        </div>
        <div class="forgot-pwd-content" v-if="isSubmit === '2'">
            <form>
                <div class="forgot-pwd-content-item">
                    <input type="password" class="forgot-pwd-input" placeholder="新密码" />
                </div>
                <div class="forgot-pwd-content-item">
                    <input type="password" class="forgot-pwd-input" placeholder="确认密码" />
                </div>
                <div class="forgot-pwd-content-span">
                    <span>密码长度8~32位,须包含数字、字母、符号至少2种或以上元素</span>
                </div>
                <button class="submit-btn" type="submit" @click="handleSubmit('2')">确定</button>
            </form>
        </div>
        <div class="forgot-pwd-content" v-if="isSubmit === '3'">
            <div class="pwd_success_box">
                <span class="pwd_success">密码修改成功！</span>

            </div>
            <button class="submit-btn" type="submit" @click="handleSubmit('3')">返回登陆
            </button>
        </div>
    </div>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
function goBack() {
    router.back()
}

function handleSubmit(type: string) {
    if (type === '1') {
        isSubmit.value = '2'
    } else if (type === '2') {
        isSubmit.value = '3'
    } else if (type === '3')
        router.push('/')

}

const isSubmit = ref('1')
</script>

<style scoped>
.forgot-pwd-container {
    max-width: 400px;
    margin: 0 auto;
    min-height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
}

.forgot-pwd-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 18px;
    margin-bottom: 32px;
}

.Back-img {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 2px;
    cursor: pointer;
}

.forgot-pwd-title {
    font-weight: 600;
    color: #222;
    font-size: 20px;
    text-align: center;
    flex: 1;
}

.forgot-pwd-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.forgot-pwd-content-item {
    width: 350px;
    margin-bottom: 18px;
}

.forgot-pwd-input {
    width: 100%;
    height: 40px;
    border: 1px solid #eee;
    border-radius: 20px;
    background: #fafbfc;
    padding: 0 16px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

.forgot-pwd-input:focus {
    border-color: #ff7f50;
}

.verify-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.verify-input {
    flex: 1;
    margin-right: 0;
}

.verify-btn {
    height: 40px;
    padding: 0 18px;
    background: #ff8247;
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.verify-btn:active {
    background: #ff5a1f;
}

.submit-btn {
    width: 80%;
    height: 44px;
    background: #ff8247;
    color: #fff;
    border: none;
    border-radius: 22px;
    font-size: 18px;
    font-weight: 500;
    margin: 18px auto 0 auto;
    display: block;
    cursor: pointer;
    transition: background 0.2s;
}

.forgot-pwd-content-span {
    margin-left: 10px;
    line-height: 17px;
    color: rgb(153, 153, 153);
    font-size: 12px;
}

.pwd_success_box {
    height: 200px;
    padding: auto o;
    line-height: 25px;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    display: flex;
    align-items: center;
}

.submit-btn:active {
    background: #ff5a1f;
}
</style>